<div *ngIf="showFirstStep">
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="d-flex align-items-start">
                <div class="step mr-3">1</div>
                <button class="btn btn-transparent" (click)="downloadTemplate()" data-dismiss="modal">Download template</button>
            </div>
        </div>
        <div class="col-md-6 secondary-text">
            Dowload our Portfolio template file (Excel).
        </div>
    </div>
    <hr />
    <form (ngSubmit)="onSubmit">
        <div class="row my-4">
            <div class="col-md-6">
                <div class="d-flex align-items-start">
                    <div class="step mr-3">2</div>
                    <div>
                        <label class="btn btn-transparent">
                            Upload Template <input type="file" id="avatar" (change)="onFileUploaded($event)" #fileInput style="display: none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" >
                        </label>
                        <p *ngIf="files && files.length > 0" class="secondary-text ml-3">{{ files[0].name }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 secondary-text">
                Upload the filled template with your Portfolio constituents information.
            </div>
        </div>
        <hr />
        <div class="row my-4">
            <div class="col-md-6">
                <div class="d-flex align-items-start">
                    <div class="step mr-3">3</div>
                    <div class="w-75">
                        <h6>Portfolio Name</h6>
                        <app-company-search [searchType]="searchTypePortfolio" #portfolioSearchComponent></app-company-search>

                        <div class="d-flex align-items-center secondary-text mt-2">
                            Sharing
                            <ui-switch size="small" class="ml-2 mt-2" [(ngModel)]="sharingStatus" name="sharingStatus"></ui-switch>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 secondary-text">
                Provide a Portfolio name or select an existing Portfolio. Additionally you can activate the Sharing functionality for this Portfolio.
            </div>
        </div>
        <div *ngIf="saveDisabled" class="alert alert-info my-4"><i class="ti-info-alt mr-2"></i> The file selected is being uploaded and processed.</div>
    </form>
</div>
<div *ngIf="showSecondStep">
    <div *ngIf="securityNotMatchedCount > 0">
        <p class="text-right">{{ nrOfCompaniesNotMatched }} securities not matched</p>
        <sustainalytics-table #securityNotMatchedTable [columns]="securityNotMatchedColumns" [source]="securityNotMatchedSource"
            [filter]="" [elementCount]="securityNotMatchedCount" [paginationPositionDisplay]="paginationPosition" (changed)="tableOptionsChangedInvalidSecurities($event)" [take]="5"
            (buttonClicked)="onButtonClicked($event)" [displayTitle]="false">
        </sustainalytics-table>
    </div>

    <div class="mt-4">
        <div class="d-flex align-items-center">
            <app-company-search class="w-50" [placeholder]="'Add a new company'" [searchType]="searchTypeCompany" #portfolioSearchComponent [hasAddButton]="true" (companyAdded)="addCompanyToPortfolio($event)"></app-company-search>
            <p class="w-50 text-right">{{ securityMatchedCount }} securities successfully matched</p>
        </div>

        <sustainalytics-table #securityMatchedTable [columns]="securityMatchedColumns" [source]="securityMatchedSource" [filter]=""
            [elementCount]="securityMatchedCount" [paginationPositionDisplay]="paginationPosition" (changed)="tableOptionsChangedValidSecurities($event)" [take]="5"
            (buttonClicked)="onButtonClicked($event)" [displayTitle]="false">
        </sustainalytics-table>
    </div>
</div>